<template>
  <div class="app-container" :class="currentTheme">
    <!-- 标题栏 -->
    <div class="header">
      <span class="title">怼怼实验室！</span>
      <div class="icons">
        <span class="theme-icon" @click="showThemeDialog = true">🎨</span>
        <!-- <span class="camera-icon">📷</span> -->
      </div>
    </div>

    <!-- 主文案区 -->
    <div class="main-text">
      <p class="main-slogan">不吵隔夜架 当场就开怼</p>
      <p class="sub-slogan">键盘侠克星 · 怼人神器</p>
    </div>

    <!-- 输入框 -->
    <div class="input-container">
      <input
        v-model="inputText"
        placeholder="输入键盘侠的那些狗屁话"
        class="input-field"
      />
    </div>

    <!-- 预设话术选择 -->
    <button @click="showPresetDialog = true" class="preset-button">
      <span>请选择预设话术</span>
      <span class="arrow-down">▼</span>
    </button>
    
    <div v-if="showPresetDialog" class="preset-dialog">
      <div class="preset-header">
        <span>选择预设话术</span>
        <span class="close-icon" @click="showPresetDialog = false">✕</span>
      </div>
      <div class="preset-list">
        <div 
          v-for="(preset, index) in presetList" 
          :key="index" 
          @click="selectPreset(preset)"
          class="preset-item"
        >
          {{ preset }}
        </div>
      </div>
    </div>

    <div v-if="showPresetDialog" class="preset-dialog">
      <div class="preset-header">
        <span>选择怼人风格</span>
        <span class="close-icon" @click="showPresetDialog = false">✕</span>
      </div>
      <div class="preset-list">
        <div 
          v-for="(preset, index) in presetList" 
          :key="index" 
          @click="selectPreset(preset)"
          class="preset-item"
        >
          {{ preset }}
        </div>
      </div>
    </div>

    <!-- 怼人风格选择 -->
    <button @click="showStyleDialog = true" class="preset-button">
      <span>{{ selectedStyle == '' ? '请选择怼人风格': selectedStyle }}</span>
      <span class="arrow-down">▼</span>
    </button>
    <div v-if="showStyleDialog" class="preset-dialog">
      <div class="preset-header">
        <span>选择怼人风格</span>
        <span class="close-icon" @click="showStyleDialog = false">✕</span>
      </div>
      <div class="preset-list">
        <div 
          v-for="(style, index) in styleList" 
          :key="index" 
          @click="selectStyle(style)"
          class="preset-item"
        >
          {{ style }}
        </div>
      </div>
    </div>

    <!-- 生成按钮 -->
    <button
      @click="generateResponse"
      :disabled="!inputText || inputText === '输入键盘侠的那些狗屁话'"
      :class="['generate-button', (!inputText || inputText === '输入键盘侠的那些狗屁话') ? 'disabled' : '']"
    >
      <span v-if="loading" class="loading-icon">⟳</span>
      <span v-else>给我疯狂输出</span>
    </button>

    <!-- 生成结果 -->
    <div class="result-container">
      <div class="result-header">
        怼人结果
        <button @click="copyResult" class="copy-button">复制</button>
        <button @click="shareResult" class="copy-button">分享</button>
      </div>
      <div class="result-content">
  <div style="max-height: 320px; overflow-y: auto;">
    {{ generatedResult }}
  </div>
</div>    </div>

    <!-- 历史记录模态框 -->
    <div v-if="showHistory" class="history-modal">
      <div class="history-header">
        <span>怼人历史记录</span>
        <span class="close-icon" @click="showHistory = false">✕</span>
      </div>
      <div class="history-list">
        <div v-for="(record, index) in historyRecords" :key="index" class="history-item" @click="showDetail(record)">
          <p>输入: {{ record.input }}</p>
          <p v-if="!showingDetail || showingDetail !== record">结果: {{ record.result.substring(0, 20) }}...</p>
          <p v-else>结果: {{ record.result }}</p>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item active">
        <span class="nav-icon">🔥</span>
        <span>暴语</span>
      </div>
      <div class="nav-item" @click="showHistory = true">
        <span class="nav-icon">📋</span>
        <span>回味一下</span>
      </div>
    </div>

    <!-- Toast提示 -->
    <div v-if="showToastMsg" class="toast-message">
      {{ toastMsg }}
    </div>
    
    <!-- 主题选择对话框 -->
    <div v-if="showThemeDialog" class="preset-dialog">
      <div class="preset-header">
        <span>选择主题风格</span>
        <span class="close-icon" @click="showThemeDialog = false">✕</span>
      </div>
      <div class="preset-list">
        <div 
          v-for="(theme, index) in themeList" 
          :key="index" 
          @click="selectTheme(theme.value)"
          class="preset-item theme-item"
        >
          <span class="theme-preview" :class="theme.value"></span>
          {{ theme.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import html2canvas from 'html2canvas';


export default {
  data() {
    return {
      inputText: '',
      showPresetDialog: false,
      showStyleDialog: false,
      showThemeDialog: false,
      currentTheme: localStorage.getItem('kaipaoTheme') || 'theme-tech',
      themeList: [
        { name: '默认主题', value: 'theme-default' },
        { name: '暗黑主题', value: 'theme-dark' },
        { name: '可爱主题', value: 'theme-cute' },
        { name: '复古主题', value: 'theme-retro' },
        { name: '科技主题', value: 'theme-tech' }
      ],
      presetList: [
        '加班是福报',
        '你不行',
        '就这？',
        '别矫情',
        '别矫情',
        '年轻人要多奉献',
        '别人都能坚持',
        '想想你的房贷',
        '这是给你的机会',
        '要有创业精神',
        '现在行情不好',
        '你能力还不到位',
        '公司培养你不容易',
        '不想干可以走人',
        '团队需要你牺牲'
      ],
      generatedResult: null,
      loading: false,
      showToastMsg: false,
      toastMsg: '',
      showHistory: false,
      showingDetail: null,
      historyRecords: JSON.parse(localStorage.getItem('historyRecords')) || [],
      styleList: [
          '文艺',
          '幽默',
          '犀利',
          '毒舌',
          '暴躁'
        ],
        selectedStyle: ''
    };
  },
  methods: {
    showToast(message) {
      this.toastMsg = message;
      this.showToastMsg = true;
      setTimeout(() => {
        this.showToastMsg = false;
      }, 2000);
    }, 
    selectPreset(preset) {
      this.inputText = preset;
      this.showPresetDialog = false;
    },
    selectStyle (preset) {
      this.selectedStyle = preset;
      this.showStyleDialog = false;
    },
    selectTheme(theme) {
      this.currentTheme = theme;
      localStorage.setItem('kaipaoTheme', theme);
      this.showThemeDialog = false;
      this.showToast('主题已切换');
    },
    copyResult() {
      // 创建临时textarea
      const textarea = document.createElement('textarea');
      textarea.value = this.generatedResult;
      textarea.style.position = 'fixed'; // 防止滚动
      document.body.appendChild(textarea);
      textarea.select();
      
      try {
        // 使用更兼容的execCommand
        const successful = document.execCommand('copy');
        this.showToast(successful ? '复制成功' : '复制失败');
      } catch (err) {
        this.showToast('复制失败，请手动选择文本复制');
      } finally {
        document.body.removeChild(textarea);
      }
    },
    async generateResponse() {
      if (!this.inputText || this.inputText === '输入键盘侠的那些狗屁话') return;
      if( this.selectedStyle == ''){
        this.selectedStyle = '暴躁'
      }

      this.loading = true;
      try {
        const response = await axios.post('/generate', {
          text: this.inputText,
          style: this.selectedStyle
        });
        console.log(response);
        if (response.data.status === 'success') {
          this.generatedResult = response.data.data.result;
          // 保存历史记录
          this.historyRecords.unshift({
            input: this.inputText,
            result: this.generatedResult
          });
          localStorage.setItem('historyRecords', JSON.stringify(this.historyRecords));
        } else {
          this.showToast('生成失败，请重试');
        }
      } catch (error) {
        this.showToast('生成失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    showDetail(record) {
      this.showingDetail = this.showingDetail === record ? null : record;
    },
    async shareResult() {
      const projectName = '怼怼实验室！';
      const slogan = '不吵隔夜架 当场就开怼，键盘侠克星 · 怼人神器';

      const shareContainer = document.createElement('div');
      shareContainer.style.width = '375px';
      shareContainer.style.padding = '30px 20px';
      shareContainer.style.backgroundColor = '#fff';
      shareContainer.style.borderRadius = '12px';
      shareContainer.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';
      shareContainer.style.fontFamily = 'PingFang SC, Microsoft YaHei, sans-serif';
      shareContainer.style.position = 'relative';
      shareContainer.style.overflow = 'hidden';

      // 添加背景装饰
      shareContainer.style.background = 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)';

      shareContainer.innerHTML = `
        <div style="position:relative; z-index:1">
          <h2 style="font-size:24px; font-weight:bold; color:#333; margin:0 0 12px">${projectName}</h2>
          <p style="font-size:16px; color:#ff4d4f; margin:0 0 8px">${slogan}</p>
          <div style="margin:24px 0; padding:16px; background:rgba(255,255,255,0.9); border-radius:8px">
            <p style="color:#666; margin:0 0 8px; font-size:14px">原话:</p>
            <p style="color:#333; margin:0 0 16px; font-size:16px">${this.inputText}</p>
            <p style="color:#666; margin:0 0 8px; font-size:14px">怼人话术:</p>
            <p style="color:#ff7a45; margin:0; font-size:16px; white-space:pre-wrap">${this.generatedResult}</p>
          </div>
          <div style="font-size:12px; color:#999; text-align:center">— 由怼怼实验室自动生成 —</div>
        </div>
      `;

      document.body.appendChild(shareContainer);
      try {
        const canvas = await html2canvas(shareContainer);
        // 微信环境特殊处理

      // 创建弹出层
      const modal = document.createElement('div');
      modal.style.position = 'fixed';
      modal.style.top = '0';
      modal.style.left = '0';
      modal.style.width = '100%';
      modal.style.height = '100%';
      modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
      modal.style.display = 'flex';
      modal.style.justifyContent = 'center';
      modal.style.alignItems = 'center';
      modal.style.zIndex = '1000';

      // 创建图片元素
      const img = new Image();
      img.src = canvas.toDataURL();
      img.style.maxWidth = '90%';
      img.style.maxHeight = '90%';
      img.style.cursor = 'pointer';
      img.oncontextmenu = (e) => {
        e.preventDefault();
        const link = document.createElement('a');
        link.href = img.src;
        link.download = '怼怼实验室分享.png';
        link.click();
      };
      modal.appendChild(img);

      // 创建关闭按钮
      const closeButton = document.createElement('button');
      closeButton.textContent = '关闭';
      closeButton.style.position = 'absolute';
      closeButton.style.top = '20px';
      closeButton.style.right = '20px';
      closeButton.style.padding = '8px 16px';
      closeButton.style.border = 'none';
      closeButton.style.borderRadius = '4px';
      closeButton.style.backgroundColor = '#ff4d4f';
      closeButton.style.color = '#fff';
      closeButton.style.cursor = 'pointer';
      closeButton.onclick = () => {
        modal.remove();
        shareContainer.remove();
      };
      modal.appendChild(closeButton);

      // 添加到页面
      document.body.appendChild(modal);
      this.showToast('长按图片保存或分享');
      // 可以替换result-content的内容或弹出新层显示
    
  } catch (error) {
    this.showToast('分享失败: ' + error.message);
  }
    },
  }
};
</script>

<style scoped>
/* 基础容器样式 */
.app-container {
  min-height: 100vh;
  padding: 16px;
  padding-bottom: 70px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: hidden;
  transition: all 0.3s ease;
}

/* 默认主题 */
.theme-default {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #333;
}

/* 暗黑主题 */
.theme-dark {
  background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
  color: #f0f0f0;
}

/* 可爱主题 */
.theme-cute {
  background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%);
  color: #6a097d;
}

/* 复古主题 */
.theme-retro {
  background: linear-gradient(135deg, #c9d6df 0%, #f0f5f9 100%);
  color: #52616b;
}

/* 科技主题 */
.theme-tech {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
  color: #00fffc;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 22px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.theme-default .title {
  color: #333;
}

.theme-dark .title {
  color: #fff;
}

.theme-cute .title {
  color: #6a097d;
}

.theme-retro .title {
  color: #52616b;
}

.theme-tech .title {
  color: #00fffc;
}

.icons {
  display: flex;
  gap: 15px;
}

.menu-icon, .camera-icon {
  font-size: 20px;
  cursor: pointer;
}

.main-text {
  text-align: center;
  margin-bottom: 25px;
}

.main-slogan {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.sub-slogan {
  font-size: 16px;
}

/* 默认主题文案颜色 */
.theme-default .main-slogan { color: #ff4d4f; }
.theme-default .sub-slogan { color: #1890ff; }

/* 暗黑主题文案颜色 */
.theme-dark .main-slogan { color: #ff7875; }
.theme-dark .sub-slogan { color: #69c0ff; }

/* 可爱主题文案颜色 */
.theme-cute .main-slogan { color: #ff4081; }
.theme-cute .sub-slogan { color: #7b1fa2; }

/* 复古主题文案颜色 */
.theme-retro .main-slogan { color: #c06c84; }
.theme-retro .sub-slogan { color: #6c5b7b; }

/* 科技主题文案颜色 */
.theme-tech .main-slogan { color: #00fffc; }
.theme-tech .sub-slogan { color: #00bcd4; }

.input-container {
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: 2px solid #d9d9d9;
  font-size: 16px;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.input-field:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 8px rgba(24,144,255,0.2);
  outline: none;
}

.preset-button {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: none;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s;
}

.preset-button:hover {
  background-color: #f5f5f5;
}

.arrow-down {
  font-size: 12px;
  color: #999;
}

.preset-dialog {
  position: fixed;
  background-color: white;
  border-radius: 10px;
  width: 85%;
  max-width: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  overflow: hidden;
}

.preset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: bold;
}

.close-icon {
  cursor: pointer;
  font-size: 14px;
  color: #999;
}

.preset-list {
  max-height: 300px;
  overflow-y: auto;
}

.preset-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.preset-item:hover {
  background-color: #f5f5f5;
}

.preset-item:last-child {
  border-bottom: none;
}

.generate-button {
  width: 100%;
  height: 54px;
  border-radius: 8px;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

/* 默认主题按钮 */
.theme-default .generate-button {
  background-color: #ff7a45;
  box-shadow: 0 4px 8px rgba(255,122,69,0.3);
}

.theme-default .generate-button:hover {
  background-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255,122,69,0.4);
}

/* 暗黑主题按钮 */
.theme-dark .generate-button {
  background-color: #ff7875;
  box-shadow: 0 4px 8px rgba(255,120,117,0.3);
}

.theme-dark .generate-button:hover {
  background-color: #ff4d4f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255,120,117,0.4);
}

/* 可爱主题按钮 */
.theme-cute .generate-button {
  background-color: #ff4081;
  box-shadow: 0 4px 8px rgba(255,64,129,0.3);
}

.theme-cute .generate-button:hover {
  background-color: #f50057;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255,64,129,0.4);
}

/* 复古主题按钮 */
.theme-retro .generate-button {
  background-color: #c06c84;
  box-shadow: 0 4px 8px rgba(192,108,132,0.3);
}

.theme-retro .generate-button:hover {
  background-color: #6c5b7b;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(192,108,132,0.4);
}

/* 科技主题按钮 */
.theme-tech .generate-button {
  background-color: #00bcd4;
  box-shadow: 0 4px 8px rgba(0,188,212,0.3);
}

.theme-tech .generate-button:hover {
  background-color: #00838f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,188,212,0.4);
}

.generate-button.disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
  box-shadow: none;
}

.generate-button.disabled:hover {
  transform: none;
}

.loading-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.result-container {
  margin-top: 20px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.result-header {
  color: white;
  padding: 10px 15px;
  font-weight: bold;
}

.theme-default .result-header { background-color: #1890ff; }
.theme-dark .result-header { background-color: #177ddc; }
.theme-cute .result-header { background-color: #9c27b0; }
.theme-retro .result-header { background-color: #6c5b7b; }
.theme-tech .result-header { background-color: #00838f; }

.result-content {
  padding: 15px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.theme-default .nav-item.active { color: #ff7a45; }
.theme-dark .nav-item.active { color: #ff7875; }
.theme-cute .nav-item.active { color: #ff4081; }
.theme-retro .nav-item.active { color: #c06c84; }
.theme-tech .nav-item.active { color: #00bcd4; }

.toast-message {
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff7a45;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 1000;
  animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
  /* position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1000;
} */

.copy-button {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}

.copy-button:hover {
  background-color: #40a9ff;
}

.history-modal {
  position: fixed;
  background-color: white;
  border-radius: 10px;
  width: 85%;
  max-width: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  overflow: hidden;
  height: 90vh;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: bold;
}

.history-list {
  max-height: 85vh;
  overflow-y: auto;
}

.history-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.history-item:last-child {
  border-bottom: none;
}
.style-selector {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.style-selector select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  font-size: 16px;
}

.theme-icon {
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px;
}

.theme-item {
  display: flex;
  align-items: center;
}

.theme-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #eee;
}

.theme-preview.theme-default {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.theme-preview.theme-dark {
  background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%);
}

.theme-preview.theme-cute {
  background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%);
}

.theme-preview.theme-retro {
  background: linear-gradient(135deg, #c9d6df 0%, #f0f5f9 100%);
}

.theme-preview.theme-tech {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}
</style>
